<template>
  <div>
    <vm-search ref="wxc-searchbar"
               placeholder="关键字搜索"
               return-key-type="search"
               class="border-bttom"
               @inputReturned="inputReturned"></vm-search>

    <list ref="list"
          :showRefresh="true"
          :showLoadMore="showLoadMore"
          @refresh="refresh"
          @loadMore="loadmore"
          loadmoreoffset="200">
      <cell v-for="(item, index) in standards"
            :key="index"
            @click="goDetail(item)">
        <div class="bg-white border-bottom p-3">
          <text class="title">{{item.standardName}}</text>
          <text class="desc">{{item.briefIntroduction}}</text>
          <text class="remark">{{item.releaseDepartment}}</text>
        </div>
      </cell>
    </list>
    <text v-if="!showLoadMore"
          class="p-3 text-muted small text-center">没有更多了</text>
  </div>
</template>
<script>
import VmSearch from '../../components/vm-search.vue'

export default {
  components: {
    VmSearch
  },
  props: {},
  data() {
    return {
      standards: [],
      params: {
        index: 1,
        size: 10,
        key: '',
        standardCategory: '100604000000'
      },
      totalPages: 2
    }
  },
  computed: {
    showLoadMore() {
      return this.totalPages > this.params.index
    }
  },
  watch: {},
  created() {
    this.refresh()
  },
  methods: {
    refresh() {
      this.params.index = 1
      this.getStandand().then(res => {
        this.standards = res
      }).finally(() => this.$refs["list"].refreshEnd())
    },
    loadmore() {
      this.getStandand().then(res => {
        this.standards.push(...res)
      }).finally(() => this.$refs["list"].loadMoreEnd())
    },
    getStandand() {
      return new Promise((resolve, reject) => {
        this.$http({
          name: 'info.data.standard',
          data: this.params,
          errorMsg: '获取标准数据失败'
        }).then(res => {
          this.params.index++
          this.totalPages = res && res.totalPages || 0
          resolve(res && res.data || [])
        }).catch(err => {
          this.totalPages = 0
        })
      })
    },
    inputReturned(e) {
      this.$notice.toast({ message: e.value || '' })
      this.params.index = 1
      this.params.key = e.value || ''
      this.getStandand()
    },
    goDetail(row) {
      this.$nav.open({
        name: 'serve.standard.detail',
        params: row
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";
.bg-white {
  background-color: #fff;
}
.border-bottom {
  border-bottom-color: $border-color;
  border-bottom-width: 1px;
}
.p-3 {
  padding: 30px;
}
.text-muted {
  color: #999;
}
.text-center {
  text-align: center;
}
.small {
  font-size: 26px;
}
.title {
  font-size: 32px;
}
.desc {
  font-size: 28px;
  color: #666;
  margin-bottom: 10px;
}
.remark {
  font-size: 24px;
  color: #999;
}
.loading {
  width: 750;
  align-items: center;
}
.indicator-text {
  color: #888888;
  font-size: 42px;
  text-align: center;
}
.indicator {
  margin-top: 16px;
  height: 40px;
  width: 40px;
  color: blue;
}
</style>
